<template>
    <div class="square-item">
        <div class="head">
            <div class="user-box" @click="toUserInfo(item.member_info.id)">
                <div class="logo">
                    <div class="wrap">
                        <img lazy :data-src="item.member_info.head_img" v-if="item.member_info.head_img">
                        <img src="@/assets/icon-un-login.png" v-else/>
                    </div>
                    <i class="vip uicon uicon-vip" v-if='item.member_info.level_id && $store.state.user.member_info.level_id'></i>
                </div>
                <div class="text">
                    <p>{{item.member_info.nickname}}</p>
                    <span><label v-if='item.member_info.level_id && $store.state.user.member_info.level_id'>VIP{{item.member_info.level_id}}</label> {{item.create_date}}</span>
                </div>
            </div>
            <a href="javascript:;" v-if="$store.state.user.member_info.id == item.member_info.id" class="del" @click="delItem(item)">删除</a>
            <a href="javascript:;" v-else class="follow" @click="follow(item)" :class="{'on':item.is_focus}">{{item.is_focus ? '已关注' : '+ 关注'}}</a>

        </div>
        <div @click="routerLink('/detail?id=' + item.id)" class="item-cont">
            <p>
                <slot name="title">{{item.content}}</slot>
            </p>
            <div class="gallery" :class="{'single-wrap':item.image.length === 1}" v-if="item.image && item.image.length>0">
                <!--单图-->
                <!-- <img class="single"> -->
                <!-- 4图 -->
                <!--<div class="border"></div>-->
                <template v-for="(img,index) in item.image">
                    <img lazy :data-src="img" @click.stop="previewImage(item,index)" :class="{'single':item.image.length === 1}" :key="img + '_' +index">
                    <div class="border" v-if="item.image.length === 4 && index === 1"></div>
                </template>
            </div>
        </div>
        <div class="foot">
            <span>{{item.browse_total}}阅读</span>
            <div class="actions">
                <span @click="admire(item)"><i class="uicon" :class="{'uicon-s-admire':!item.is_admire,'uicon-admire-on':item.is_admire}"></i> {{item.admire_total == 0 ? '点赞' : item.admire_total}}</span>
                <span @click="routerLink('/detail?id=' + item.id)"><i class="uicon uicon-s-comment"></i> {{item.comment_count == 0 ? '评论' : item.comment_count}}</span>
                <span @click="$emit('item-share')"><i class="uicon uicon-s-share"></i> {{item.share_total == 0 ? '分享' : item.share_total}}</span>
            </div>
        </div>
        <ui-preview :config="preview" v-if="preview.status" @close="preview.status = false"/>
    </div>

</template>
<script>
import uiPreview from '@/components/preview.vue'

export default {
    name:'square-item',
    props:{
        item:Object,
        params:Object
    },
    data(){
        return {
            preview:{
                status:false,
                delete:false,
                active:0,
                list:[]
            },
        }
    },
    components:{
        [uiPreview.name]:uiPreview,
    },
    methods:{
        routerLink(url){
            if(this.$router){
                if(this.$route.name === 'detail'){
                    try{
                        this.$parent.$parent.$refs.comment.showEdit();
                    }catch(e){console.log(e)}
                }else{
                    this.$router.push(url)
                }
            }else{
                location.href = this.$config.pages.square +"#"+ url;
            }
        },
        toUserInfo(id){
            if(this.$store.state.user.member_info.id == id) return;
            location.href = this.$config.pages.profile+'?id='+ id;
        },
        follow(item){
            if(item._fouce_loading) return;
            let isFollw = !!item.is_focus;
            item._fouce_loading = true;
            let url = isFollw ? '?ct=member_focus&ac=del_focus' : '?ct=member_focus&ac=add_focus';
            this.$http.post(url,{
                member_id:item.member_info.id
            }).then(response => {
                    let { data } = response;
                    if (data.code == 0) {
                        item.is_focus = isFollw ? 0 : 1;
                        this.$toast((isFollw ? '取消': '关注') + "成功");
                    } else {
                        this.$toast(data.msg);
                    }
                })
                .catch(e => {
                    window.$zEvent.$emit("ERROR", e);
                    this.$toast(e);
                })
                .finally(() => {
                    item._fouce_loading= false;
                });
        },
        admire(item){
            if(item._admire_loading || item.is_admire) return;
            item._admire_loading = true;
            let url = '?ct=member_publish&ac=add_admire';

            this.$http.post(url,{
                id:item.id
            }).then(response => {
                    let { data } = response;
                    if (data.code == 0) {
                        item.is_admire =1;
                        item.admire_total++;
                    } else {
                        this.$toast(data.msg);
                    }
                })
                .catch(e => {
                    window.$zEvent.$emit("ERROR", e);
                    this.$toast(e);
                })
                .finally(() => {
                    item._admire_loading= false;
                });
        },
        delItem(item){
            if(item._delete_loading) return;
            item._delete_loading = true;
            let url = '?ct=member_publish&ac=del_publish';
            this.$http.post(url,{
                id:item.id
            }).then(response => {
                    let { data } = response;
                    if (data.code == 0) {
                        this.$utils.unlike.set(this.item.id);
                        this.$emit('delete');
                        this.$toast('删除成功');
                    } else {
                        this.$toast(data.msg);
                    }
                })
                .catch(e => {
                    item._delete_loading= false;
                    window.$zEvent.$emit("ERROR", e);
                    this.$toast(e);
                });
        },
        //图片预览
        previewImage(item,index){
            this.preview.active = index;
            this.preview.list = item.image
            this.preview.status = true;
        },
    }
}
</script>
<style lang="less">
.flex-middle(){
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: inherit;
}
.square-item {
    & + .square-item {
        margin-top:20px;
    }
    background-color:#fff;
    padding:20px 30px 30px;

    .user-box {
        display: flex;
        flex:1;
        overflow: hidden;
        .logo {
            position: relative;
            width:58px;
            height:58px;
            margin-right:14px;
            .wrap {
                width:100%;
                height:100%;
                overflow: hidden;
                border-radius: 50%;
            }
            img {
                width:100%;
                height:100%;
            }

            .vip {
                position:absolute;
                bottom:0;
                right:0;
            }
        }
        .text {
            flex:1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            p,span {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            p {
                font-size:28px;
                color:#a98273;
            }
            span {
                font-size:24px;
                color: #919191
            }
        }
    }
    .head {
        display: flex;
        align-items: center;
        .follow {
            .flex-middle();
            flex-shrink: 0;
            flex-grow: 0;
            // width: 110px;
            padding:0 10px;
            height:40px;
            border-radius: 20px;
            font-size:24px;
            color:#5a4640;
            border:2px solid #e2e2e2;

            &.on {
                text-indent: 26px;
                color:#999;
                background-image:url(../../assets/icon-right.png);
                background-size:18px 13px;
                background-repeat: no-repeat;
                background-position:6px center;
            }
        }
        .del {
            line-height: 58px;
            font-size:24px;
            color:#5a4640;
        }
    }
    .item-cont {
        display: block;
        margin-top:30px;

        p {
            font-size:32px;
            color:#282828;
            line-height:1.6875
        }
    }

    .gallery {
        display: flex;
        flex-wrap: wrap;
        margin-top:18px;
        margin-left:-12px;
        &.single-wrap {
            display: block;
        }
        .border {
            background-color:transparent!important;
        }
        img,.border {
            margin-left:12px;
            margin-top:12px;
            background-color:#f6f6f6;
            display: block;
            border-radius: 10px;
        }
        .border,img:not(.single) {
            width:222px;
            height:222px;
        }
        .single {
            max-width:100%;
            height:auto;
        }
    }
    .foot {
        display: flex;
        justify-content: space-between;
        margin-top:30px;
        font-size:24px;
        color:#919191;
        .uicon {
            vertical-align: top;
        }
        &>span {
            flex-shrink: 0;
            margin-right:10px;
        }
        span {
            line-height: 30px;
        }

        .actions {
            text-align: right;
            flex:1;
            overflow: hidden;
            color:#666;
            white-space: nowrap;
            span + span {
                margin-left:44px;
            }
        }
    }
}
</style>


